/*
* @Author: yyf
* @Date: 2018/4/10
* @description: 投资事件 添加页
*/
<template>
    <div class="cms-detail-box p-20">
        <div>
            <el-row class="main-box">
                <div :span="24">
                    <el-tabs @tab-click="selectTab" :value="tabIndex">
                        <el-tab-pane label="基本信息">
                            <div v-if="tabIndex==='0'">
                                <BasicInfo ref="basicInfo" @changeInfo="changeInfo" @getEventId="getEventId"></BasicInfo>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="标的企业财务" :disabled="eventId === '-1'">
                            <div v-if="tabIndex==='1'">
                                <EnterpriseFinance></EnterpriseFinance>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="投资方" :disabled="eventId === '-1'">
                            <div v-if="tabIndex==='2'">
                                <Investor :eventType="17"></Investor>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="退出方" :disabled="eventId === '-1'">
                            <div v-if="tabIndex==='3'">
                                <Quitor :eventType="17"></Quitor>
                                <TransactionEvent></TransactionEvent>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="三方中介" :disabled="eventId === '-1'">
                            <div v-if="tabIndex==='4'">
                                <ThreePartyIntermediaries></ThreePartyIntermediaries>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="评估公司" :disabled="eventId === '-1'">
                            <div v-if="tabIndex==='5'">
                                <AppraiseCompany></AppraiseCompany>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="right-btn">
                        <DetailStateBtn 
                            :infoStatus="infoStatus" 
                            @setState="setState" 
                            class="left-btn">
                        </DetailStateBtn>
                        <el-button type="primary" @click="close">关闭</el-button>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script lang="ts">
    import Vue from 'vue';
    // import { Component, Watch } from 'vue-property-decorator';
    import { Component } from 'vue-property-decorator';
    import BasicInfo from './tabs/basic-info.vue';
    import EnterpriseFinance from './tabs/enterprise-finance.vue';
    import AppraiseCompany from './tabs/appraise-company.vue';
    import Investor from '../../../components/event/investor/index.vue';
    import Quitor from '../../../components/event/quitor/index.vue';
    import TransactionEvent from '../../../components/event/transaction-event/index.vue';
    import ThreePartyIntermediaries from '../../../components/event/three-party-intermediaries/index.vue';
    import DetailStateBtn from '../../../components/detail-state-btn/index.vue';
    import { StateMessage } from '../../../service/common/interface';
    @Component({
        components: {
            BasicInfo, // 基本信息组建
            EnterpriseFinance, // 标的企业财务组件
            AppraiseCompany, // 评估公司组建
            Investor, // 投资方组件
            Quitor, // 退出方组件
            TransactionEvent, // 相关投融资事件组件
            ThreePartyIntermediaries, // 相关投融资事件组件
            DetailStateBtn, // 信息状态组件
        }
    })
    export default class CompanyList extends Vue {
        // 初始化数据 相当于data
        public eventId: string = '';
        public companyId: string = '';
        public tabIndex: string = '0';
        public infoStatus: string = '';

        // refs
        public $refs: {
            basicInfo: HTMLFormElement, // 基本信息组件
        };

        // 声明周期钩子
        public mounted() {
            this.eventId = this.$route.params.eventId;
            this.tabIndex = this.$route.params.tabIndex;
        }
        // 方法
        public selectTab(tab: { index: string }) {
            this.tabIndex = tab.index;
        }
        public getEventId(val: string) {
            this.eventId = val;
        }
        // 关闭-跳转到列表页
        public close() {
            this.$router.push({ name: 'transaction-list' });
        }
        // 按钮
        public setState(state: StateMessage) {
            this.infoStatus = state.infoStatus;
            this.$refs.basicInfo.saveBasicInfo(state);
        }
        // 信息状态回显
        public changeInfo(state: string) {
            this.infoStatus = state;
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .noPass {
        color: #f00;
    }

    .w-100 {
        width: 100%;
    }

    .align-center-self {
        text-align: center;
        line-height: 40px;
    }

    .main-box {
        position: relative;
    }

    .main-box .right-btn {
        position: absolute;
        right: 20px;
        top: 0;
    }
    .right-btn .left-btn {
        display: inline-block;
        margin-right: 5px;
    }
</style>